<!--
 * @Author: xuhy 1727317079@qq.com
 * @Date: 2022-09-04 09:48:48
 * @LastEditors: xuhy 1727317079@qq.com
 * @LastEditTime: 2022-09-16 09:54:48
 * @FilePath: \vue3_test\src\App.vue
 * @Description: 父组件
-->
<template>
  <div class="app">
    <h3>我是App组件</h3>
  </div>
</template>

<script>
import {
  ref,
  reactive,
  readonly,
  toRefs,
  isRef,
  isReactive,
  isReadonly,
  isProxy,
} from "vue";
export default {
  name: "APP",
  setup() {
    let car = reactive({
      name: "奔驰",
      price: "40W",
    });

    let sum = ref(0);
    let car2 = readonly(car);
    console.log(isRef(sum));
    console.log(isReactive(car));
    console.log(isReadonly(car2));
    console.log(isProxy(car));

    return {
      sum,
      car2,
      ...toRefs(car),
    };
  },
};
</script>

<style scoped>
.app {
  background-color: gray;
  padding: 10px;
}
</style>
